﻿@model UserDetailsViewModel

@{
    ViewBag.Title = "Details";
}

<section id="user-details">
    <h1 id="lbl-user">@Model.UserName</h1>
    
    @if (Model.IsCurrentUser)
    {
        <a class="edit-link">Change</a>
    }
    
    <div class="gravatar">
        <img 
            src="@Model.GravatarUrl" 
            alt="" 
            width="128" 
            height="128" 
            class="logo">
        <div class="reputation">
            <span>
                @Model.NumberOfContributes
            </span>
            contributes
        </div>
    </div>
    <div class="latest-questions">
        <h2>Latest questions</h2>
        
        @if (Model.Questions.IsNotNullOrEmpty())
        {
            <ul>
                @foreach (var question in Model.Questions)
                {
                    <li>
                        <strong>
                            @question.AnswersCount</strong>
                        <span>
                            @Html.ActionLink(question.Title, "Details", "Question", new{ id = question.QuestionId }, null)
                        </span>
                        <div class="cbt"></div>
                    </li>
                }
            </ul>
        }
    </div>
</section>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        var _originalValue = '@Model.UserName';
        
        $(function () {
            $('.edit-link').click(function () {
                $('.edit-link').hide();
                var el = $('<input id="lbl-user-input" type="text" value="' + $('#lbl-user').text() + '" />');
                $('#lbl-user').replaceWith(el);
                el.select();
                el.keydown(function(event) {
                    if (event.which == 13) {
                        $.ajax({
                            url: '/User/Update/',
                            dataType: 'json',
                            type: 'POST',
                            data: { userName: el.val() },
                            success: function (data) {
                                if (data.Success) {
                                    $('#lbl-user-input').replaceWith('<h1 id="lbl-user">' + data.NewValue + '</h1>');
                                    $('.edit-link').show();
                                } else {
                                    alert('Error.'); // Provide better output.
                                }
                            },
                            statusCode: {
                                401: function () {
                                    window.location = '/User/LogIn/?ReturnUrl=' + encodeURIComponent(document.URL);
                                }
                            }
                        });
                    }
                    else if (event.which == 27) {
                        $('#lbl-user-input').replaceWith('<h1 id="lbl-user">' + _originalValue + '</h1>');
                        $('.edit-link').show();
                    }
                    else {
                        // It'd be cool if we did check for existing user names!
                    }
                });
            });
        });
    </script>
}